<template>
  <div
    class="card group overflow-hidden animate__animated animate__fadeInUp"
    :style="animationDelay"
  >
    <!-- 项目图片 -->
    <div class="relative h-56 overflow-hidden">
      <img
        :src="project.image"
        :alt="project.title"
        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
      />
      <div
        class="absolute top-3 right-3 bg-primary text-white text-xs px-2 py-1 rounded"
      >
        {{ project.category }}
      </div>
      <!-- 悬停时显示的操作按钮 -->
      <div
        class="absolute inset-0 bg-black/60 flex items-center justify-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
      >
        <n-button
          v-if="project.demoUrl"
          type="primary"
          size="small"
          tag="a"
          :href="project.demoUrl"
          target="_blank"
        >
          <template #icon>
            <n-icon>
              <EyeOutline />
            </n-icon>
          </template>
          预览
        </n-button>
        <n-button
          v-if="project.githubUrl"
          type="default"
          size="small"
          tag="a"
          :href="project.githubUrl"
          target="_blank"
          class="bg-white"
        >
          <template #icon>
            <n-icon>
              <LogoGithub />
            </n-icon>
          </template>
          查看代码
        </n-button>
      </div>
    </div>
    <!-- 项目信息 -->
    <div class="p-6">
      <h3 class="text-xl font-semibold mb-2 text-text-primary">
        {{ project.title }}
      </h3>
      <p class="text-text-secondary mb-4">{{ project.description }}</p>
      <!-- 技术标签 -->
      <div class="flex flex-wrap gap-2">
        <n-tag
          v-for="tech in project.technologies"
          :key="tech"
          size="small"
          round
        >
          {{ tech }}
        </n-tag>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { EyeOutline, LogoGithub } from "@vicons/ionicons5";

// 定义项目类型
interface Project {
  id: number;
  title: string;
  description: string;
  image: string;
  category: string;
  categoryValue: string;
  technologies: string[];
  demoUrl: string | null;
  githubUrl: string | null;
}

// 定义组件props
const props = defineProps({
  project: {
    type: Object as () => Project,
    required: true,
  },
  index: {
    type: Number,
    default: 0,
  },
});

// 计算动画延迟
const animationDelay = computed(() => {
  return `animation-delay: ${props.index * 0.1}s`;
});
</script>
